<template>
  <div>
    <KForm :model="userInfo" :rules="rules" ref="loginForm">
      <KFormItem label="用户名" prop="username">
<!--        vue3 变化：v-model传入value要指定属性名value-->
        <KInput type="text" v-model:value="userInfo.username" placeholder="请输入用户名"></KInput>
      </KFormItem>
      <KFormItem label="密码" prop="password">
        <KInput type="text" v-model:value="userInfo.password" placeholder="请输入密码"></KInput>
      </KFormItem>
      <button @click="login">提交</button>
    </KForm>
    <div class="container">
      <KCarousel
          :autoplay="true"
          :duration="3000"
          :initial="0"
          :hasDot="true"
          :hasDirector="true"
      >
        <KCarouselItem
            v-for="(item, index) in carouselData"
            :key="index"
        >
          <img :src="require(`../assets/img/${item.img}`)">
        </KCarouselItem>
      </KCarousel>
    </div>
    <KTreeMenu
        :data="treemenuData"
    ></KTreeMenu>
    <KSelector
        :data="selectorData"
        @setItemValue="setItemValue">
    </KSelector>
  </div>


</template>

<script>
import KInput from "../components/KInput";
import KFormItem from "../components/KFormItem";
import KForm from "../components/KForm";
// import KNotice from "../components/KNotice";
import selectorData from "../data/selector"
import treemenuData from "../data/treemenu"
import carouselData from "../data/carousel";

export default {
  name: "Login",
  components: {KForm, KFormItem, KInput},
  data() {
    return {
      userInfo: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: "未输入用户名" }],
        password: [{ required: true, message: "未输入密码" }]
      }
    }
  },

  methods: {
    //通过refs获取DOM节点，调用KForm的validate全局校验方法
    login() {
      this.$refs['loginForm'].validate(res => {
        console.log(4, res)
        if(res) {
          this.$notice({
            title: 'ahhahahaa',
            message: '提示信息',
            duration: 1000,
          })
        }
      })
    }
  },
  setup() {
    const setItemValue = (v) => {
      console.log(3, v)
    }
    return {
      setItemValue,
      selectorData,
      treemenuData,
      carouselData,
    }
  }
}
</script>

<style scoped>

</style>